<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>教师端</title>
            <link rel="stylesheet" href="/css/sel_scores.css">
        </head>
<body>
<div class="home">
    <header>
        欢迎学号/工号：<%=uid%>，使用学生管理系统，当前您的职务是：<%=posts%>
        <span>【<a href="/logout">退出登录</a>】</span>
    </header>
    <article>
        <ul>
            <li><a href="/add_means">录入学生信息</a></li>
            <li><a href="/sel_means">查看学生资料</a></li>
            <li><a href="/sel_scores">查询学生成绩</a></li>
            <li><a href="/add_scores">添加学生成绩</a></li>
            <li><a href="/home_teach">查看登录日志</a></li>
            <li><a href="/checkpwd">更改密码</a></li>
        </ul>
        <aside>
           <div>
               <label>请选择学期：</label>
               <select name="num" id="" onchange="postsel(this.value)" class="scores_select">
                   <option disabled value="" selected>请选择</option>
                   <option value="1">第一学期</option>
                   <option value="2">第二学期</option>
                   <option value="3">第三学期</option>
                   <option value="4">第四学期</option>
                   <option value="5">第五学期</option>
               </select>
           </div>
            <table class="login_tmp tabs1" id="scores" cellspacing="0" cellpadding="0">
            </table>
        </aside>
    </article>
</div>
</body>
        <script type="text/javascript" src="/script/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
// 声明一个下拉菜单所调用的函数
            function postsel(val) {
            //发起post异步请求：请求方式、请求地址、请求时提交的数据、返回的结果
                $.post({
                    url:'/sel_scores',
                    dataType:'json',    //自动将数据转换为指定数据类型
                    data:{num:val},
                    success:function (test) {
                    //test查询结果的返回
                        console.log(test);
                    //    1.声明一个空字符串
                        var str='';
                    //    2. 拼接表头
                    str+='<tr>';
                    str+='<td class="tds1">学号</td>';
                        str+='<td class="tds1">姓名</td>';
                      test[0].forEach((cname)=>{
                          str+='<td class="tds1">'+cname.class_name+'</td>';
                      })
                        str+='</tr>';
                    //    3.循环具体成绩
                        test.forEach((list)=>{
                            str+='<tr>';
                            str+='<td class="tds2">'+list[0].uid+'</td>';
                            str+='<td class="tds2">'+list[0].stu_name+'</td>';
                            list.forEach((item)=>{
                                str+='<td class="tds2">'+item.scores+'</td>';
                            })
                            str+='</tr>';
                        })
                    //    3.作为表单内容插入指定位置
                        $('#scores').html(str);
                    }
                })
            }
        </script>
</html>